<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="../Teachercentre/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="course-details-three.css">
    <script src="../course-details/course-datail2.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <link rel="stylesheet" href="../Questioncentre/questioncentre.css">
</head>

<body>
    <!-- 整个页面大盒子 -->
    <div class="web">
        <div class="wrapper">
            <div class="logging">
                <div class="loginpic1">
                    <div class="closediv"> <span class="closebtn">×</span></div>
                    <div class="title">拉勾教育</div>
                    <div class="desc">互联网实战大学</div>
                    <div class="item">
                        <div class="active">
                            <li class="txt">账户登录</li>
                        </div>
                        <div>
                            <li class="txt">注册</li>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div style="display:block;text-align: center;">
                        <input type="text" id="username" placeholder="请输入账号" contenteditable="off">
                        <input type="password" id="password" placeholder="请输入密码">
                        <br/>
                        <span> 
                        <label class="left1">
                            <input type="checkbox" id="remember">
                            记住密码
                        </label>
                        <label class="right55">
                            <input type="checkbox" id="check1" >
                            七天免登录
                        </label>
                        </span>
                        <p id="error" class="p1"></p>
                        <input type="submit" id="submit" value="登录">
                        <ul class="loginfoot">
                            <li><img src="../Homepage/img/wechatlogo.png" alt=""></li>&nbsp&nbsp
                            <li class="zi">微信扫码登录</li>
                        </ul>
                    </div>

                    <div style="text-align: center;">
                        <p class="p1">用户名</p>
                        <input type="text" placeholder="请输入账号" id="username1">
                        <p class="p1">密码</p>
                        <input type="text" placeholder="请输入密码" id="password1"> <br>
                        <p class="p1">身份</p> <br> 教师 <input type="radio" id="teacher" name="role">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp学生 <input type="radio" id="student" name="role">

                        <br/>
                        <p id="error1" class="p1"></p>
                        <input type="submit" id="register1" value="注册">
                    </div>
                </div>
            </div>
        </div>
        <script>
            //记住用户名
            var username = document.querySelector('#username');
            var password = document.querySelector('#password');
            var remember = document.querySelector('#remember');
            if (localStorage.getItem('username')) {
                username.value = localStorage.getItem('username');
                remember.checked = true;

            }
            if (localStorage.getItem('password')) {
                password.value = localStorage.getItem('password');
                remember.checked = true;

            }
            remember.addEventListener('change', function() {
                if (this.checked) {
                    localStorage.setItem('username', username.value);
                    localStorage.setItem('password', password.value);
                } else {
                    localStorage.removeItem('username');
                    localStorage.removeItem('password');
                }
            })
        </script>
        <!-- 整个页面大盒子 -->
        <div class="web">
            <!-- 导航栏 -->
            <div class="wrap">
                <div class="wrap-content">
                    <div class="wrap-content-left">
                        <div class="logo"><img src="img/logo.png" alt="" width="40px" height="40px"></div>
                        <div class="title-1">拉勾教育</div>
                        <div class="title-2">互联网人实战大学</div>
                    </div>
                    <div class="search">
                        <input type="text" class="search-input" placeholder="请输入搜索内容">
                        <div class="to_search"></div>
                        <ul class="search-content search-content-scroll">

                        </ul>
                    </div>
                    <!-- 导航栏分项 -->
                    <div class="wrap-content-right">
                        <ul class="tab-list">
                            <li class="sec"><a href="../Homepage/index1.html">选课</a></li>
                            <li class="sec" id="teachercentre" style="display: none;"> <a href="../Teachercentre/teachercentre.html">教师中心</a></li>
                            <li class="sec">
                                <a href="../Studyspace/studyspace.html">学习</a>
                            </li>
                            <li class="sec"><a href="../Questioncentre/questioncentre.html">师生问答</a></li>
                        </ul>
                        <!-- 登陆/注册 -->
                        <div class="login">
                            <div class="sign-up" id="loginbtn1">登陆</div>
                            <div class="register" id="loginbtn2">注册</div>
                            <div class="dropdown">
                                <div class="dropdown-icon"></div>
                                <button class="dropbtn" id="userinfo"></button>
                                <div class="dropdown-content">
                                    <a href="#">我的收藏夹</a>
                                    <a href="../Setuserinfo/setuserinfo.html" id="setuser">账户设置及充值</a>
                                    <a href="#" id="out-login">退出登录</a>
                                </div>
                            </div>
                            <div class="pic" id="loginbtn3"><img src="img/register.png" alt=""><span class="rolelogo">游客</span></div>
                            <div class="pic" id="rlogo"><img src="img/register.png" alt=""><span class="rolelogo" id="rolelogo"></span></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 整个网页内容 -->
            <div class="container-pc">
                <div class="nav-wrap">
                    <p class="nav-content">
                        <a href="../Homepage/index1.html" class="zi1">课程列表 ></a>
                        <span class="ctitle"></span>
                    </p>
                </div>
                <div class="course-show-container">

                    <div class="course-show">
                        <div class="course-show-bg">
                            <img src="img/bg-left.png" alt="" class='course-show-img-left'>
                            <img src="img/bg-right.png" alt="" class='course-show-img-right'>


                        </div>
                        <div class="course-show-context">
                            <div class="course-show-context-pic">
                                <img src="https://s0.lgstatic.com/i/image6/M00/31/02/CioPOWBsA1CAQMs1AAEB851ioBE339.png" alt="" class="img1">
                            </div>

                            <div class="course-show-context-wrap">
                                <div class="course-context-one">计算机网络</div>
                                <div class="course-context-two">
                                    <div class="course-context-two-teacher">小林</div>
                                    <div class="course-context-two-icon"></div>
                                    <div class="course-context-two-time">29节</div>
                                    <div style="clear: both;"></div>
                                </div>
                            </div>
                            <div class="course-show-context-reminder">
                                <div class="reminder-icon-one"> <img src="img/reminder-icon.png" alt=""></div>
                                <div class="reminder-icon-two"> <img src="img/reminder-icon1.png" alt=""></div>
                                <span>订阅学习提醒</span>
                            </div>
                            <div class="course-show-context-earn">
                                <div class="earn-icon-one"> <img src="img/earn-icon.png" alt=""></div>
                                <div class="earn-icon-two"><img src="img/earn-icon1.png" alt=""></div>
                                <span class="money">赚￥19.60</span>
                            </div>

                        </div>

                        <div class="share-reminder">
                            <div class="share-title-one">
                                扫码关注拉勾教育

                            </div>
                            <div class="share-title-two">
                                新课时上新
                                <span class='share-reminder-text'>即时提醒</span>
                            </div>
                            <div class="share-reminder-code">
                                <img src="img/showqrcode" alt="">
                            </div>
                            <div class="share-title-three">
                                微信扫一扫
                            </div>
                            <div class="share-reminder-icon"></div>
                        </div>

                        <div class="share-earn">
                            <div class="share-title-one">
                                邀请好友购买成功，即赚
                                <span class='share-earn-text'>￥19.60</span>
                            </div>
                            <div class="share-title-two">
                                扫码生成专属海报
                            </div>
                            <div class="share-earn-code">
                                <img src="img/share-code-one.png" alt="">
                            </div>
                            <div class="share-title-three">
                                微信扫一扫
                            </div>
                            <div class="share-earn-icon"></div>
                        </div>
                    </div>
                    <script>
                        var reminder = document.querySelector('.course-show-context-reminder');
                        var earn = document.querySelector('.course-show-context-earn');
                        var share_earn = document.querySelector('.share-earn');
                        var share_reminder = document.querySelector('.share-reminder');
                        reminder.addEventListener('mouseenter', function() {
                            share_reminder.style.display = 'block';
                        })
                        reminder.addEventListener('mouseleave', function() {
                            share_reminder.style.display = 'none';
                        })
                        earn.addEventListener('mouseenter', function() {
                            share_earn.style.display = 'block';
                        })
                        earn.addEventListener('mouseleave', function() {
                            share_earn.style.display = 'none';
                        })
                    </script>
                    <div class="course-show-content">
                        <div class="course-content-learning">
                            <div class='course-learning-one'>29</div>
                            <div class='course-learning-two'>已学章节(讲)</div>
                        </div>
                        <div class="course-content-learning">
                            <div class='course-learning-one1'>29h</div>
                            <div class='course-learning-two'>学习时长</div>
                        </div>
                        <div class="course-content-wrap">
                            <span class='course-text-one'>上次学到：</span>
                            <span class='course-text-two'>开篇词</span>
                        </div>
                        <div class="course-content-btn">继续学习</div>

                    </div>
                </div>
                <div class="public-show">
                    <div class="public-box">
                        <!--大题目 -->
                        <div class="public-box-title">
                            <div class="title-box">
                                <span class='public-box-title-one'>课程</span>
                                <span class='public-box-title-two'>留言讨论</span>
                            </div>
                        </div>
                        <!-- 内容盒子 -->
                        <div class="course-container">
                            <!-- 栏目内容 -->

                            <!-- <div class="model-title">
                                箭头
                                <div class="model-title-icon"></div>
                                展开按钮
                                <div class="model-title-icon-box-one"></div>
                                收起按钮
                                <div class="model-title-icon-box-two"></div>
                                开篇词</div>
                            <div class="model-box">
                                <div class="model-box-text">
                                    开篇词 | 一次搞定计算机网络，高效修炼程序员内功
                                </div>
                                <div class="model-box-text">
                                    课前导读 | 程序员如何打好计算机领域的基础？
                                </div>
                            </div>
                            <div class="model-title">
                                <div class="model-title-icon"></div>
                                <div class="model-title-icon-box-one"></div>
                                <div class="model-title-icon-box-two"></div>
                                模块一</div>
                            <div class="model-box">
                                <div class="model-box-text">
                                    03 | TCP 的封包格式：TCP 为什么要粘包和拆包？
                                </div>
                                <div class="model-box-text">
                                    加餐 | 模块一思考题解答
                                </div>
                            </div>
                            <div class="model-title">
                                <div class="model-title-icon"></div>
                                <div class="model-title-icon-box-one"></div>
                                <div class="model-title-icon-box-two"></div>
                                模块二</div>
                            <div class="model-box">
                                <div class="model-box-text">
                                    03 | TCP 的封包格式：TCP 为什么要粘包和拆包？
                                </div>
                                <div class="model-box-text">
                                    加餐 | 模块一思考题解答
                                </div>
                            </div>
                            <div class="model-title">
                                <div class="model-title-icon"></div>
                                <div class="model-title-icon-box-one"></div>
                                <div class="model-title-icon-box-two"></div>
                                模块三</div>
                            <div class="model-box">
                                <div class="model-box-text">
                                    03 | TCP 的封包格式：TCP 为什么要粘包和拆包？
                                </div>
                                <div class="model-box-text">
                                    加餐 | 模块一思考题解答
                                </div>
                            </div>
                            <div class="model-title">
                                <div class="model-title-icon"></div>
                                <div class="model-title-icon-box-one"></div>
                                <div class="model-title-icon-box-two"></div>
                                模块四</div>
                            <div class="model-box">
                                <div class="model-box-text">
                                    03 | TCP 的封包格式：TCP 为什么要粘包和拆包？
                                </div>
                                <div class="model-box-text">
                                    加餐 | 模块一思考题解答
                                </div>
                            </div>
                            <div class="model-title">
                                <div class="model-title-icon"></div>
                                <div class="model-title-icon-box-one"></div>
                                <div class="model-title-icon-box-two"></div>
                                模块五</div>
                            <div class="model-box">
                                <div class="model-box-text">
                                    03 | TCP 的封包格式：TCP 为什么要粘包和拆包？
                                </div>
                                <div class="model-box-text">
                                    加餐 | 模块一思考题解答
                                </div>
                            </div>
                            <div class="model-title">
                                <div class="model-title-icon"></div>
                                <div class="model-title-icon-box-one"></div>
                                <div class="model-title-icon-box-two"></div>
                                结束语</div>
                            <div class="model-box">
                                <div class="model-box-text">
                                    03 | TCP 的封包格式：TCP 为什么要粘包和拆包？
                                </div>
                                <div class="model-box-text">
                                    加餐 | 模块一思考题解答
                                </div>
                            </div> -->


                        </div>


                    </div>
                    <!-- <script>
                    var model_icons = document.querySelectorAll('.model-title-icon');
                    for(var i=0;i<model_icons.length;i++) {
                        model_icons[i].addEventListener('click',function() {
                            this.className=' model-title-icon-change';
                            console.log(this.className);
                        var model_icon_changes = document.querySelectorAll('.model-title-icon-change');
                        console.log('apple');
                        console.log(model_icon_changes.length);
                       for(var j=0;j<model_icon_changes.length;j++) {
                        model_icon_changes[j].addEventListener('click',function() {
                            this.className=' model-title-icon';
                            console.log(this.className);
                            return;
                        })
                    }
                        })
                    }
                    
                    
                </script> -->
                    <div class="teacher-box">

                        <div class="teacher-header">
                            <div class="teacher-header-pic">
                                <img src="img/teacher-header-pic.png" alt="">
                            </div>
                            <span style="display: inline-block;"> 专属班主任</span>
                        </div>
                        <div class="teacher-body">
                            <div class="teacher-process">
                                <div class="process-round"></div>
                                <div class="process-line"></div>
                                <div class="process-round"></div>
                            </div>
                            <div class="teacher-content">
                                <div class="step-one">

                                    第1步: 添加班主任微信

                                </div>
                                <div class="step-code-box">
                                    <div class="step-code-pic">
                                        <img src="https://s0.lgstatic.com/i/image6/M00/0F/CD/Cgp9HWA97syAf4G1AABcYeS0kEg214.png" alt="" style="width: 100%;height: 100%;">
                                    </div>
                                    <div class="step-code-text">微信扫描二维码</div>
                                </div>
                                <div class="step-two">
                                    第2步: 发送验证信息
                                </div>
                                <div class="expression">
                                    添加班主任好友及时输入信息，进入专属学习班级
                                </div>
                                <div class="step-btn">
                                    “ 计网 ”
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
</body>

<!-- 专属班主任模块 -->
<script>
    var teacher_box = document.querySelector('.teacher-box');
    var public_show = document.querySelector('.public-show');
    var wrap = document.querySelector('.wrap');
    moveDis = public_show.offsetTop - wrap.offsetHeight;
    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= moveDis) {
            teacher_box.className = 'teacher-box-change';
        } else {
            teacher_box.className = 'teacher-box';
        }
    })
</script>

</html>